/**
 * 类组件
 */
import React from "react";
import { flushSync } from "react-dom";
export default class ClassComponent extends React.Component {
  box3 = React.createRef();
  constructor(props) {
    super(props);
    console.log(props);
    this.state = {
      count: 0,
    };
  }
  /**
   * component和pureComponent的区别
   * PureComponent 会在组件的 props 或 state 发生变化时，自动调用 shouldComponentUpdate 方法进行比较。
   * 如果发现 props 或 state 发生了变化，则会重新渲染组件。
   * 但是如果发现 props 或 state 没有发生变化，则不会重新渲染组件。
   * 但是需要注意的是，PureComponent 只能用于简单的场景。
   * 如果组件的 props 或 state 结构复杂，或者涉及到深层嵌套的对象或数组时，
   * PureComponent 可能无法正确地判断 props 或 state 是否发生了变化，从而导致组件不必要地重新渲染。
   * 因此，在使用 PureComponent 时需要谨慎考虑其适用场景。
   */

  /**
   * 父组件第一次渲染：
   * 父组件willMount=>父组件render=>子组件willMount=>子组件render=>子组件didMount=>父组件didMount
   *---------------------------------
   * 父组件更新
   * 父组件shouldUpdate=>父组件willUpdate=>父组件render=>子组件shouldUpdate=>子组件willUpdate=>子组件render=>子组件didUpdate=>父组件didUpdate
   * --------------------------------
   * 父组件销毁
   * 父组件willMount=>子组件willMount=>子组件销毁=>父组件销毁
   */

  // this.$forceUpdate(); //强制更新组件

  // //组件第一次渲染之前的钩子函数，不安全 不建议使用
  // componentWillUnmount() {
  //   console.log("ClassComponent componentWillUnmount");
  // }
  componentDidMount() {
    console.log(this.refs.titleBox);
    console.log(this.numBox);
    console.log(this.box3.current);
    console.log("ClassComponent componentDidMount");
  }

  componentDidUpdate() {
    console.log("ClassComponent componentDidUpdate");
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log("ClassComponent shouldComponentUpdate");
    return true;
  }

  /**
   * 组件卸载前的生命周期方法。
   *
   * 当组件即将被卸载时，该方法会被调用。
   * 在这里可以进行一些清理工作，比如取消网络请求、移除事件监听等。
   */
  componentWillUnmount() {
    console.log("ClassComponent componentWillUnmount");
  }

  // callback 发生在componentDidUpdate 之前
  // 特殊：即使我们基于shouldComponentUpdate阻止了状态/视图更新，DidUpdate周期函数肯定不会执行了，但是我们设置这个callback回调函数依然会被触发执行！！
  handleClick = (add) => {
    const { count } = this.state;
    // flushSync批量更新
    flushSync(() => {
      this.setState(
        {
          count: add ? count + 1 : count - 1,
        },
        () => {
          console.log("数据更新了");
        }
      );
      this.setState(
        {
          count: add ? count + 1 : count - 1,
        },
        () => {
          console.log("数据更新了");
        }
      );
      this.setState(
        {
          count: add ? count + 1 : count - 1,
        },
        () => {
          console.log("数据更新了");
        }
      );
    });

    //prevState之前状态的值
    this.setState((prevState) => {
      return {
        count: prevState.add ? prevState.count + 1 : prevState.count - 1,
      };
    });
  };

  render() {
    console.log("ClassComponent render");
    return (
      <div>
        <h2 ref="titleBox">类组件</h2>
        <p ref={(x) => (this.numBox = x)}>{`当前计数：${this.state.count}`}</p>
        <button ref={this.box3} onClick={() => this.handleClick(1)}>
          点击增加
        </button>
        <button onClick={() => this.handleClick(0)}>点击减少</button>
      </div>
    );
  }
}
